<template>
	<div class="booksgit">
		<div class="tablist">
			<!-- 出版社 -->
			<div class="swiper-container presslist" style="border-bottom: 1px dotted white;">
				<ul class="tab swiper-wrapper">
					<li @click="select()" class="swiper-slide">全部</li>
					<li @click="find(item)" class="swiper-slide" v-for="(item,i) in booklist" :key="i">{{item}}</li>
				</ul>
			</div>
			<!-- 出版时间 -->
			<div class="swiper-container pubilcationDate" style="border-bottom: 1px dotted white;">
				<ul class="tab swiper-wrapper">
					<li @click="select()" class="swiper-slide">全部</li>
					<li @click="findTmake(item)" class="swiper-slide" v-for="(item,i) in pubilcationDate" :key="i">{{item}}</li>
				</ul>
			</div>
		</div>
		<div class="bookslist">
			<ul>
				<template v-for="(item,index) in pressList">
					<li :key="item.id">
						<router-link :to="`/mobile/bookdetail/${item.id}`">
						<img :src="`${$ip}/api/public/showimg/${item.pic}`"/>
						<h3>{{item.name}}</h3>
						<span>{{item.maker}}</span>
						</router-link>
					</li>
				</template>
			</ul>
		</div>
	</div>
</template>

<script>
// 导入swiper组件内容 【周期函数内，第一第二阶段，如果是请求的数据进行轮播，建议在第三阶段/监听器内执行】
import Swiper from 'swiper';
export default {
	name:'MobileBooksGit',
	data(){
		return{
			list:[],
			arr:[],
			pressList : [],
			pubilcationDate : [],
			//分类
			categoryMenus : [],
			booklist:[],
		}
	},
	props:['proplist'],
	methods:{
		select(){
			//查找所有书籍
				this.$get("/api/public/findPageBook/1/12/0").then((resp)=>{
					this.arr =resp.data.data.books;
					this.pressList =resp.data.data.books;
					
					this.arr.forEach((item)=>{
						let k =this.booklist.indexOf(item.maker);
						if(k == -1){
							this.booklist.push(item.maker);
						}
					})
					this.arr.forEach((item)=>{
						item.tmake =new Date(item.tmake).getFullYear();
					})
			})
		},
		find(i){
			this.pressList=[];
			console.log(i);
			this.arr.forEach((item)=>{
				if(i==item.maker){
					this.pressList.push(item);
				}
			})
			console.log(this.arr);
		},
		findTmake(i){
			this.pressList=[];
			console.log(i);
			this.arr.forEach((item)=>{
				if(i==item.tmake){
					this.pressList.push(item);
				}
			})
			console.log(this.arr);
		},
	},
	created(){
		let maxYear =new Date().getFullYear();
		console.log(maxYear);
		for(let i=2010;i<maxYear;i++){
			this.pubilcationDate.push(i);
		}
	},
	// 组件模板渲染
	mounted(){
		this.select();
		// 调用轮播对象
		setTimeout(()=>{
			new Swiper('.pubilcationDate,.presslist', {
			// 调整轮播之间的间距
			spaceBetween : 20,
			// 设置根据宽度
			slidesPerView : 'auto',
			})
		},200)
	}
}
</script>

<style scoped>
.booksgit{
	width: 100%;
	background-color: #f5d5a0;
}
.booksgit .tablist{
	width: 95%;
	margin: 0 auto 1rem;
	border-top: 1px dotted white;
	border-bottom: 1px dotted white;
}
.booksgit .tablist .tab{
	height: 2.5rem;
	line-height: 2.5rem;
}
.booksgit .tablist .tab li{
	color: #715e3e;
	font-size: 0.875rem;
	/* 不设置任何宽度 包括0*/
	width: unset;
}
.booksgit .bookslist{
	width: 100%;
}
.booksgit .bookslist ul{
	width: 96%;
	margin: 0 auto 2.5rem;
	display: flex;
	align-items: center;
	/* 换行 */
	flex-wrap: wrap;
}
.booksgit .bookslist ul li{
	width: 46%;
	overflow: hidden;
	margin-left: 0.8rem;
	margin-bottom: 0.8rem;
	background-color: white;
	text-align: center;
	position: relative;
}
.booksgit .bookslist ul li img{
	width: 80%;
	height: 10rem;
	margin-top: 1rem;
}
.booksgit .bookslist ul li h3{
	width: 100%;
	height: 2.5rem;
	line-height: 2.5rem;
	font-size: 0.8rem;
	background-color: rgba(245,213,160,0.5);
	color: #a68b5b;
	text-align: center;
	font-weight: normal;
	/* 中文强制不换行 */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.booksgit .bookslist ul li span{
	font-size: 0.7rem;
	background-color: rgba(0,0,0,0.5);
	position: absolute;
	top: 0;
	right: 0;
	color: gold;
	padding: 0.4rem 0.3rem;
	/* 单独设置某个角 为圆角 */
	border-radius: 0 0 0 0.6rem;
}
</style>
